<template>
    <div class="more-hot">
        <!-- 搜索 -->
       <search>
           <template #sm-inp>
                <input type="text" placeholder="请输入关键词..." @focus="toSearch">
           </template>
           <template #sl-icon >
                <svg @click="back" t="1636616685570" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2419" width="200" height="200"><path d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0" fill="#666666" p-id="2420"></path></svg>
           </template>
       </search>

        <div class="hots">
            <div class="title">
                <p>热门搜索</p>
                <span class="update">2021-11-10 12:25更新</span>
            </div>
            <div class="hot-box">
                <div class="hot" v-for="item,index in entry.hotData" :key="item.id" @click="addClick(item.keyword)">
                    <div class="hl">{{index+1}}</div>
                    <div class="hr">
                        <p class="h-tit">{{item.keyword}}</p>
                        <p>{{item.summary}}</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import search from "../components/hot-search.vue"
import {mapState,mapMutations} from "vuex"
export default {
    name:"moreHot",
    components:{
        search
    },
    methods:{
        ...mapMutations(["addHistory"]),
        back(){
            this.$router.go(-1)
        },
        toSearch(){
            this.$router.push({path:"/findSearch"})
        },
        addClick(value){
            this.addHistory(value);
            this.$store.commit('entry/searchEntry',value)
            this.$router.push({path:"/findResult"})
            this.entry.inpKeyword = value;
        }
    },
    computed:{
        ...mapState(["entry"])
    }
}
</script>
<style lang="scss" scoped>
.hots{
    margin-top: 50px;
    padding: 20px 20px;
    .title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        p{
            font-size: 17px;
            font-weight: bold;
        }
        .update{
            font-size: 13px;
            font-weight: 500;
            color: #888;
            margin-left: 10px;
        }
    }
    .hot-box{
        .hot{
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .hl{
                width: 40px;
                text-align: center;
                font-size: 20px;
                color: rgb(245, 211, 125);
                font-weight: bold;
                margin-right: 10px;
            }
            .hr{
                p{
                    font-size: 13px;
                    color: #888;
                }
                .h-tit{
                    font-size: 15px;
                    color: #333;
                    margin-bottom: 5px;
                }
            }
        }
    }
}
</style>